<!-- #layout name=blank-->
<div id="app">
  <div class="page-header">
    <h1 class="title">Code Search</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <div class="navbar navbar-default">
    <div class="container-fluid" style="display: flex; align-items: center">
      <input
        class="form-control"
        style="max-width: 200px; margin-right: 5px"
        v-model="keyword"
        @keydown.enter="onSearch"
      />
      <a class="btn green navbar-btn" @click="onSearch">Search</a>
    </div>
  </div>

  <kb-table :data="list">
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <span @click.stop="">{{ row.name }}</span>
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.common.type">
      <template v-slot="row">
        <span class="label label-sm label-success">{{row.type}}</span>
      </template>
    </kb-table-column>

    <kb-table-column label="Line">
      <template v-slot="row">
          <div v-for="line in row.lines">
              <span>line</span>
              {{line.lineNumber}} : {{line.summary}}
          </div>
        {{row.line}} 
      </template>
    </kb-table-column>

    <kb-table-column label="URL" width="100px">
      <template v-slot="row"> <a class="btn green" :href="row.url">Edit</a> </template>
    </kb-table-column>
  </kb-table>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
  ]);

  new Vue({
    el: "#app",
    data: function () {
      return {
        breads: [
          {
            name: "SITES",
          },
          {
            name: "DASHBOARD",
          },
          {
            name: "Code search",
          },
        ],
        list: [],
        keyword: "",
      };
    },
    methods: {
      onSearch() {
        Kooboo.CodeSearch.getList({ keyword: this.keyword }).then((rsp) => {
          if (!rsp.success) return;
          this.list = rsp.model;
        });
      },
    },
  });
</script>
